<template>
	<view class="order-page">
		<view class="address" @click="reasonShow = true" v-if="addressList.length > 0">
			<view class="icon-box">
				<u-icon class="icon" size="60rpx" name="map-fill"></u-icon>
			</view>
			<view class="content" v-if="showAddress === ''">
				<view class="text">
					<text class="uname">请选择地址</text>
				</view>
			</view>
			<view class="content" v-else>
				<view class="text">
					<text class="uname">{{ showAddress.name }}</text>
					<text class="phone">{{ showAddress.phone }}</text>
				</view>
				<view class="address-info">{{ addressTransform(showAddress.modify_region.name) }}{{ showAddress.addr }}</view>
			</view>
			<view class="btn">
				<u-icon name="arrow-right" color="#ccc" size="28rpx"></u-icon>
			</view>
		</view>
		<view class="plus-address" v-else @click="goNewAddress">
			<u-icon name="plus-circle" color="#C24242" size="60rpx"></u-icon>
			<view class="txt">添加收货地址</view>
		</view>
		
		<view class="goods-info">
			<image class="image" :src="goodsInfo.img.url" mode="aspectFill"></image>
			<view class="content">
				<view class="title">{{ goodsInfo.name }}</view>
				<view class="price">￥{{ goodsInfo.price }}</view>
				<view class="bottom">
					<view class="specs">规格：一份</view>
					<view class="num">x1</view>
				</view>
			</view>
		</view>
		<view class="info-box">
			<view class="top">
				<view class="item">
					<view class="label">商品金额</view>
					<view class="price">￥{{ goodsInfo.price }}</view>
				</view>
				<view class="item" @click="deductionShow = true">
					<view class="label">{{ config.trade_currency_2 }}抵扣</view>
					<view class="available">可用{{ config.trade_currency_2 }}￥{{ userInfo.integral }}</view>
					<view class="price" v-if="isDeduction">-￥{{ useGold }}</view>
					<view class="price" v-else>不使用</view>
					<u-icon name="arrow-right" color="#333" size="26rpx"></u-icon>
				</view>
			</view>
			<view class="bottom">
				<view class="item">
					<text class="text">已优惠</text>
					<text class="value">￥{{ useGold }}</text>
				</view>
				<view class="item">
					<text class="text">剩余应付</text>
					<text class="value">￥{{ totalPrice }}</text>
				</view>
			</view>
		</view>
		
		<view class="bottom-box">
			<view class="price">合计:￥{{ totalPrice }}</view>
			<button class="btn" size="mini" @click="pay">提交订单</button>
		</view>
		
		<u-popup :show="reasonShow" mode="bottom" round="14rpx" closeable @close="reasonShow = false">
			<view class="address-popup">
				<view class="title">收货地址</view>
				<scroll-view class="content" scroll-y>
					<view class="plus-address" @click="goNewAddress">
						<u-icon name="plus" color="#5749f7" size="52rpx" bold></u-icon>
						<view class="text">添加收货地址</view>
					</view>
					<view class="item" v-for="(item, index) in addressList" :key="index" @click="addressRadioChange(item.id)">
						<view class="radio" :class="{ 'active': addressId === item.id }">
							<u-icon name="checkbox-mark" :color="addressId === item.id ? '#fff' : '#e5e5e5'" size="28rpx"></u-icon>
						</view>
						<view class="info">
							<view class="text">
								<text class="default" v-if="item.is_default === 1">默认</text>
								<text class="uname">{{item.name}}</text>
								<text class="phone">{{item.phone}}</text>
							</view>
							<view class="address-info">{{ addressTransform(item.modify_region.name) }}{{ item.addr }}</view>
						</view>
						<!-- <view class="icon">
							<u-icon name="edit-pen" color="#f9421a" size="36rpx"></u-icon>
						</view> -->
					</view>
				</scroll-view>
				<view class="btn-box">
					<button type="primary" class="btn" @click="reasonShow = false">确认</button>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="deductionShow" mode="bottom" round="14rpx" closeable @close="deductionShow = false">
			<view class="deduction-popup">
				<view class="list-box">
					<view class="item" @click="isDeduction = true">
						<view class="label">使用</view>
						<view class="radio" :class="{ 'active': isDeduction === true }">
							<u-icon name="checkbox-mark" color="#fff" size="28rpx"></u-icon>
						</view>
					</view>
					<view class="item" @click="isDeduction = false">
						<view class="label">不使用</view>
						<view class="radio" :class="{ 'active': isDeduction === false }">
							<u-icon name="checkbox-mark" color="#fff" size="28rpx"></u-icon>
						</view>
					</view>
				</view>
				
				<button class="btn" @click="deductionShow = false">确认</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { confirmOrder, getMaterial, getAddressList, getConfig } from '@/api/api'

	export default {
		data () {
			return {
				goodsInfo: {
					price: 0,
				},
				
				/* 用户信息 */
				userInfo: {
					integral: 0,
				},
				config: {},
				
				/* 地址数据 */
				addressList: [],
				status: 'loadmore',
				page: 0,
				last_page: 1,
				
				/* 选中的地址 */
				addressId: '',
				
				/* 地址弹窗 */
				reasonShow: false,
				
				/* 金豆抵扣 */
				isDeduction: true,
				deductionShow: false,
			}
		},
		onLoad () {
			getConfig().then(res => {
				if (res) {
					this.config = res.data
				}
			})
			
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('onShopOrder', (data) => {
				this.goodsInfo = data
			})
		},
		onShow () {
			this.loadData()
		},
		methods: {
			loadData () {
				getMaterial().then(res => {
					if (res) {
						this.userInfo = res.data.data
					}
				})

				this.loadAddress()
			},
			loadAddress () {
				this.page = 0
				this.last_page = 1
				this.addressList = []
				this.getListData()
			},
			async getListData () {
				if(this.page >= this.last_page) return
			
				this.status = 'loading'
				this.page = ++this.page
			
				const req = await getAddressList({
					page: this.page,
					page_size: 10,
				})
				
				if (req) {
					this.addressList = this.addressList.concat(req.data.data)
					this.last_page = req.data.last_page
					
					if (this.page >= this.last_page) {
						this.status = 'nomore'
					} else {
						this.status = 'loading'
					}
					
					if (this.addressId === '') {
						const address = this.addressList.find(item => {
							return item.is_default == 1
						})
						if (address) {
							this.addressId = address.id
						}
					}
					
					return ''
				}
			},
			addressRadioChange (id) {
				this.addressId = id
			},
			goNewAddress () {
				uni.navigateTo({
					url: '/pages/my/address/addressAdd'
				})
			},
			
			pay () {
				if (this.addressId == '') {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					})
					
					return
				}
				
				uni.showLoading({ mask: true })
				
				confirmOrder({
					sku_details: [{
						note: '',
						num: 1,
						goods_item_id: this.goodsInfo.skuInfo.id
					}],
					address_id: this.addressId,
					integral: this.useGold,
					goods_type: 2
				}).then(res => {
					uni.hideLoading({ noConflict: true })
				
					if (res) {
						const data = res.data
						
						uni.redirectTo({
							url: `/pages/index/cash?total_amount=${data.total_amount}&trade_sn=${data.trade_sn}&type=vip`
						})
					}
				})
			}
		},
		computed: {
			showAddress () {
				if (this.addressId === '') {
					return ''
				} else {
					const address = this.addressList.find(item => {
						return item.id === this.addressId
					})
					
					if (address) {
						return address
					} else {
						this.addressId = ''
						return ''
					}
				}
			},
			addressTransform () {
				return (name) => {
					if (name) {
						return name.split('/').join('')
					} else {
						return ''
					}
				}
			},
			useGold () {
				if (this.isDeduction) {
					let gold = Number(this.userInfo.integral)
					let price = Number(this.goodsInfo.price)
					
					if (gold > price) {
						if (price > 1) {
							let num = parseInt(price) - 1
							return num
						} else {
							return 0
						}
					} else {
						return parseInt(gold)
					}
				} else {
					return 0
				}
			},
			totalPrice () {
				return Number(this.goodsInfo.price) - this.useGold
			}
		}
	}
</script>

<style lang="scss">
.order-page {
	box-sizing: border-box;
	padding: 24rpx;
	padding-bottom: 124rpx;
	padding-bottom: calc(124rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(124rpx + env(safe-area-inset-bottom));
	min-height: 100%;
	background-color: $bg-color;
	.address {
		margin-bottom: 24rpx;
		padding: 28rpx 32rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		.icon-box {
			width: 120rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 12rpx;
			color: $uni-color-primary;
			background: fade-out($color: $uni-color-primary, $amount: 0.9);
		}
		.content {
			flex: 1;
			padding: 0 20rpx 0;
			.address-info {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				white-space: normal;
				font-size: 24rpx;
				color: #333;
			}
			.text {
				margin-bottom: 10rpx;
			}
			.uname {
				font-size: 30rpx;
				color: #333333;
				margin-right: 10rpx;
				font-weight: bold;
			}
			.phone {
				font-size: 28rpx;
				color: #999;
			}
			.default {
				width: 68rpx;
				height: 40rpx;
				border: 1px solid $uni-color-primary;
				border-radius: 6rpx;
				font-size: 22rpx;
				line-height: 36rpx;
				color: $uni-color-primary;
				text-align: center;
				margin-left: 10rpx;
				padding: 0 8rpx;
			}
		}
	}
	.plus-address {
		margin-bottom: 24rpx;
		padding: 28rpx 32rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		.txt {
			margin-top: 12rpx;
			font-size: 28rpx;
		}
	}
	.goods-info {
		padding: 28rpx;
		border-radius: 14rpx;
		background-color: #fff;
		display: flex;
		.image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx;
		}
		.content {
			flex: 1;
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			.title {
				color: #333333;
				font-size: 30rpx;
			}
			.price {
				margin-top: auto;
				color: #666;
				font-size: 24rpx;
			}
			.bottom {
				margin-top: auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.specs {
					color: #6c6c6c;
					font-size: 28rpx;
				}
				.num {
					color: #333333;
					font-size: 24rpx;
				}
			}
		}
	}
	.info-box {
		margin-top: 24rpx;
		padding: 0 28rpx;
		border-radius: 14rpx;
		background-color: #fff;
		.top {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;
			.item {
				height: 100rpx;
				color: #3a3a3a;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.available {
					flex: 1;
					margin-left: 60rpx;
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
		.bottom {
			padding: 54rpx 0 32rpx;
			color: #333;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 72rpx;
			.value {
				color: #cd2a1b;
			}
		}
	}
	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		height: 100rpx;
		padding: 0 28rpx;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.price {
			color: #000;
			font-size: 32rpx;
		}
		.btn {
			margin: 0;
			padding: 0;
			border-radius: 72rpx;
			width: 200rpx;
			height: 72rpx;
			color: #fff;
			font-size: 30rpx;
			line-height: 72rpx;
			background-color: #cd2a1b;
		}
	}
	.address-popup {
		.title {
			font-size: 36rpx;
			text-align: center;
			color: #333333;
			line-height: 90rpx;
			border-bottom: 1px solid #EEEEEE;
		}
		.content {
			box-sizing: border-box;
			height: 680rpx;
			padding: 28rpx;
			.plus-address {
				height: 160rpx;
				padding: 0;
				border: 1rpx solid #EEEEEE;
				border-radius: 12rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.text {
					margin-top: 16rpx;
				}
			}
			.item {
				text-align: left;
				height: 180rpx;
				border-bottom: 1rpx solid #EEEEEE;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&:last-of-type {
					border-bottom: none;
				}
				.info {
					flex: 1;
					margin-left: 20rpx;
					.text {
						margin-bottom: 10rpx;
						.default {
							color: #FFFFFF;
							font-size: 24rpx;
							background: $primary-color;
							border-radius: 6rpx;
							padding: 0 12rpx;
							margin-right: 12rpx;
						}
						.uname {
							font-size: 26rpx;
							color: #333333;
							margin-right: 10rpx;
						}
						.phone {
							font-size: 24rpx;
							color: #999;
						}
					}
					.address-info {
						color: #666;
						font-size: 28rpx;
					}
				}
			}
		}
		.btn-box {
			padding: 20rpx 28rpx;
			.btn {
				font-size: 32rpx;
				background-color: $primary-color;
			}
		}
	}
	.deduction-popup {
		padding: 100rpx 20rpx 24rpx;
		.list-box {
			padding: 0 32rpx;
			border-top: 1rpx solid #ebedf0;
			border-bottom: 1rpx solid #ebedf0;
			.item {
				height: 86rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				&:not(:last-child) {
					border-bottom: 1rpx solid #f5f6f7;
				}
				.label {
					color: #333;
					font-size: 28rpx;
				}
			}
		}
		.btn {
			margin-top: 24rpx;
			border-radius: 72rpx;
			height: 72rpx;
			color: #fff;
			font-size: 28rpx;
			line-height: 72rpx;
			background-color: $primary-color;
		}
	}
}
</style>
